<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>商品列表</title>
		<meta name="keywords" content="文乐文" />
		<meta name="description" content="文乐文" />

		<link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" />
		<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="static/css/common.css" type="text/css" />
		<link rel="stylesheet" href="static/css/element2.css" />

		<script src="static/js/element-china-area-data.iife.js"></script>
	</head>

	<body>
		<div id="app" v-cloak>
			<!-- 包含头部 -->
			<div class="header_box">
				<!-- container-fluid -->
				<div class="header container">
					<div class="logo_box">
						<img src="static/picture/logo2.png" />
					</div>
					<div class="nav_box">
						<a href="index.html">
							<div class="item">首页</div>
						</a>
						<a href="goods.html">
							<div class="item">产品中心</div>
						</a>
						<a href="integral.html">
							<div class="item">积分商城</div>
						</a>
						<a href="lease.html">
							<div class="item">进销存ERP</div>
						</a>
						<a href="service.html">
							<div class="item">服务与支持</div>
						</a>
						<a href="my.html">
							<div class="item ">个人中心</div>
						</a>
						<!-- <a href="contact.html">
              <div class="item ">联系我们</div>
          </a> -->
					</div>
					<div class="buy-box">
						<a href="javascript:;" class="tit">购买</a>
						<div class="sub" style="display: none">
							<div class="list">
								<a target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">文乐文京东旗舰店</a>
							</div>
						</div>
					</div>
					<div class="search_box">
						<input name="keyword" type="text" class="search_input" id="header_search_input"
							placeholder="搜索">
						<button id="header_search_btn" class="search_btn"></button>
					</div>
				</div>
			</div>

			<div class="page_batch container">
				<div class="title">快速下单</div>
				<div class="plist">
					<div style="display: flex; justify-content: space-between">
						<div>
							<!-- <el-button type="primary" style="margin-bottom: 10px" @click="add"
              >新增</el-button
            > -->
							<el-button type="warning" style="margin-bottom: 10px" @click="toOrder">我的订单</el-button>
						</div>

						<div class="address_box">
							<div class="active" style="cursor: pointer" class="col-sm-12 item" :key="index">
								收货地址：
								<span v-if="addAddressForm.address && addAddressForm.address.realName">
									{{addAddressForm.address.province}}{{addAddressForm.address.city}}{{addAddressForm.address.district}}{{addAddressForm.address.detail}}
									{{addAddressForm.address.realName}}{{addAddressForm.address.phone}}</span>
								<!-- @click="edit(addAddressForm.address)" -->
								<button v-if="addAddressForm.address && addAddressForm.address.realName"
									@click="toEditAddress" class="btn btn-primary address_modify_btn" type="button"
									data-address_id="11" style="margin-left: 10px">
									修改
								</button>
								<button v-else @click="toEditAddress" class="btn btn-primary address_delete_btn"
									type="button" data-address_id="11" style="margin-left: 5px">
									添加新地址
								</button>
							</div>
						</div>
					</div>
					<div class="address_form" data-user_address_id="0" v-if="showAdd">
						<div class="col-sm-12 row" style="margin-bottom: 10px">
							<div class="col-sm-6 item">
								<div class="input-group">
									<span class="input-group-addon">姓名</span>
									<input type="text" v-model="addAddressForm.realName" class="form-control"
										name="name" />
								</div>
							</div>
							<div class="col-sm-6 item" style="margin-bottom: 10px">
								<div class="input-group">
									<span class="input-group-addon">电话</span>
									<input type="text" v-model="addAddressForm.phone" class="form-control"
										name="phone" />
								</div>
							</div>
						</div>
						<div class="col-sm-12 row" style="margin-bottom: 10px">
							<div class="col-sm-6 item">
								<div class="input-group">
									<span class="input-group-addon">省市区</span>
									<el-cascader style="width: 100%" v-model="addr" ref="cascaderAddr"
										:options="regionData" :props="cityProps" placeholder="请选择省市区"
										@change="handleAddrChange"></el-cascader>
								</div>
							</div>
							<div class="col-sm-6 item">
								<div class="input-group">
									<span class="input-group-addon">地址</span>
									<input type="text" v-model="addAddressForm.detail" class="form-control"
										name="address" />
								</div>
							</div>
						</div>
						<div class="col-sm-12 row" style="
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 10px 0;
              ">
							<div class="btn_box">
								<button id="confirm_address_btn" class="btn btn-primary" type="button"
									@click="addAddress">
									保存
								</button>
								<button @click="showAdd = false" id="cancle_address_btn" class="btn btn-primary"
									type="button">
									取消
								</button>
							</div>
						</div>
					</div>
					<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" stripe
						:data="tableData" border style="width: 100%">
						<el-table-column prop="date" label="商品名称">
							<template slot-scope="scope">
								<el-select v-model="scope.row.productId" filterable style="width: 350px"
									placeholder="请输入" @change="selectOption(scope,$event)">
									<el-option v-for="item in options" :key="item.id" :label="item.storeName"
										:value="item.id">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="图片" width="100" prop="image">
							<template slot-scope="scope">
								<el-image v-if="scope.row.image" style="width: 80px; height: 80px"
									:src="scope.row.image" :preview-src-list="[scope.row.image]"></el-image>
							</template>
						</el-table-column>
						<el-table-column prop="storeName" label="单位" width="250">
							<template slot-scope="scope">
								<div class="productWinList">
									<div class="item" v-for="(item, indexw) in scope.row.attr.productAttr"
										:key="indexw">
										<div class="titles">{{ item.attrName }}</div>
										<div class="listn acea-row row-middle">
											<div class="itemn" :class="item.index === itemn ? 'on' : ''"
												@click="tapAttr(scope.$index,indexw, indexn)"
												v-for="(itemn, indexn) in item.attrValues" :key="indexn">
												{{ itemn }}
											</div>
										</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="数量" width="170">
							<template slot-scope="scope">
								<el-input-number @change="changeGoodsNumber(scope,$event)" v-if="scope.row.productId"
									v-model="scope.row.cartNum" :min="1" :max="scope.row.attr.productSelect.stock"
									size="small"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column label="单价" width="80">
							<template slot-scope="scope">
								<span>￥{{scope.row.attr.productSelect?.price}}</span>
							</template>
						</el-table-column>
						<el-table-column label="经销商价格" width="120">
							<template slot-scope="scope">
								<span>￥{{scope.row.attr.productSelect?.agentPrice}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="address" label="小计" width="80">
							<template slot-scope="scope">
								<span>￥{{scope.row.allPrice}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="80">
							<template slot-scope="scope">
								<el-button @click="delRow(scope.$index)" size="small" type="danger"
									style="margin-bottom: 10px" @click="add">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<div style="display: flex; justify-content: center; margin-top: 10px">
						<el-button type="primary" style="margin-bottom: 10px" @click="add"><i class="el-icon-plus"></i>
							添加下一行</el-button>
					</div>

					<div class="fixedBox">
						<div class="checkTypelist">
							<span style="margin-right: 10px;">是否使用积分</span>
							<el-checkbox v-model="SubOrderForm.useIntegral">使用积分抵扣</el-checkbox>
							<span style="margin-left: 20px;">剩余积分：{{allintegral.integral}}</span>
						</div>
						<div class="checkTypelist">
							<span style="margin-right: 10px;">是否开票</span>
							<el-radio-group v-model="SubOrderForm.isInvoice">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</div>

						<div class="otherlist" style="display: flex;align-items: center;">
							<span style="margin-right: 10px;">优惠券</span></span>
							<!-- <el-select v-model="SubOrderForm.couponId" class="m-2" placeholder="请选择" size="small">
						    <el-option
						      v-for="item in youhuiquanlist"
						      :key="item.value"
						      :value="item.id"
						    >
						    <span style="float: left">满{{ item.minPrice }}减{{item.money}}元</span></el-option>
						  </el-select> -->

							<el-radio-group v-model="SubOrderForm.couponId">
								<el-radio label="">不使用</el-radio>
								<el-radio :label="item.id" v-for="(item,index) in youhuiquanlist" :key="index">满{{ item.minPrice
						  }}减{{item.money}}元</el-radio>
							</el-radio-group>
						</div>
						<div class="beizhu">
							<el-input type="textarea" :rows="4" style="width: 500px" v-model="SubOrderForm.mark"
								placeholder="请输入备注" v-model="textarea">
							</el-input>
							<div style="font-size: 16px">
								<span>总数量：{{allNumber}}</span>
								<span style="margin-left: 20px">总金额：￥{{allPrice}}</span>
								<div class="confirm_btn_box">
									<button class="btn btn-primary confirm_btn" type="button" @click="confim">
										提交
									</button>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<!-- 包含公共底部文件 -->
			<div class="footer">
				<div class="footer_box container">
					<div class="contact_box col-sm-4 f-cb">
						<div class="dtitle">服务/Service</div>
						<div class="tel_box">
							<p class="title">全国统一热线电话</p>
							<p class="tel">0574-58974484</p>
						</div>
						<div class="mail_box">
							<p class="title">服务邮箱</p>
							<p class="mail">598292588@qq.com</p>
						</div>
					</div>
					<div class="nav_list col-sm-4 f-cb">
						<div class="dtitle">导航/Navigation</div>
						<ul class="nav_box">
							<li><a href="about.html">关于我们</a></li>
							<li><a href="">商品中心</a></li>
							<li><a href="lease.html">打印机租赁</a></li>
							<li><a href="service.html">服务与支持</a></li>
							<li><a href="contact.html">联系我们</a></li>
						</ul>
					</div>
					<div class="search col-sm-4 f-cb">
						<div class="dtitle">产品中心/Product center</div>
						<div class="search_box">
							<input class="search_input" name="keyword" placeholder="搜索" />
							<!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
							<a class="btn btn-primary jd_btn" target="_blank"
								href="https://mall.jd.com/index-11504190.html?from=pc">京东商城</a>
						</div>
						<div class="wechat_box">
							<div class="item">
								<img src="static/picture/wechat.svg" />
							</div>
							<div class="item">
								<img src="static/picture/weibo.svg" />
							</div>
						</div>
					</div>
				</div>

				<div class="site_info container">
					Copyright ©2020 宁波文乐文科技有限公司 版权所有
					<a href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020041669号-1</a>
				</div>
			</div>


			<el-dialog title="选择支付方式" :close-on-press-escape="false" :visible.sync="dialogVisible" width="30%">
				<div>
					<div class="wxpayline" v-if="weixinurl">
						<span>请使用微信扫码支付</span>
						<img :src="weixinurl" alt="微信支付二维码">
						<el-button type="primary" @click="mePayed" size="mini">我已支付</el-button>
					</div>
					<div v-else>
						<el-radio v-model="payradio" label="edu">额度支付</el-radio>
						<el-radio v-model="payradio" label="weixin">微信支付</el-radio>
						<div style="margin-top: 20px;justify-content: flex-end;display: flex;" slot="footer"
							class="dialog-footer">
							<el-button type="primary" @click="payOrder">确 定</el-button>
						</div>
					</div>
				</div>


			</el-dialog>



		</div>

		<script src="static/js/vue2.js"></script>
		<script src="static/js/element2.js"></script>
		<script src="static/js/jquery.js"></script>
		<script src="static/js/common.js"></script>
		<script src="static/js/pca-code.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

	</body>

</html>

<script>
	var app = new Vue({
		el: "#app",
		data: {
			weixinurl: '',
			dialogVisible: false,
			payradio: 'edu',
			goodsid: '',
			allintegral: {},
			value: "",
			showAdd: false,
			payorderno: '',
			addresslist: [],
			options: [],
			cityList: cityoption,
			loading: false,
			youhuiquanlist: [],
			tableData: [{
				productId: "",
				image: "",
				storeName: "",
				cartNum: "",
				price: "",
				allPrice: "",
				productAttrUnique: "",
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
				},
			}, ],
			addr: [],
			attr: {},
			productValue: [],
			regionData: elementChinaAreaData.regionData,
			allNumber: 0,
			allPrice: 0,
			cityProps: {
				value: "label", // 指定选项的 值 为选项对象的某个属性值
				label: "label", // 指定选项 标签 为选项对象的某个属性值
				children: "children", //指定选项的 子选项 为选项对象的某个属性值
			},
			SubOrderForm: {
				addressId: "",
				mark: "",
				phone: "",
				payType: "",
				useIntegral: true,
				preOrderNo: "",
				couponId: "",
				payChannel: "pc",
				shippingType: 1,
				storeId: "",
				useIntegral: false,
				isInvoice: 0
			},
			addAddressForm: {
				id: "",
				detail: "",
				isDefault: true,
				phone: "",
				realName: "",
				address: {
					city: "",
					district: "",
					province: "",
				},
			},
		},
		created() {
			let token = localStorage.getItem("token") ?
				localStorage.getItem("token") :
				"";

			if (token) {
				this.getGoods();
				this.getAddress();
				this.getyouhuiquanList()
				this.getintegraluser()



			} else {
				this.$message.error("请先登录");
				setTimeout(() => {
					window.location.href = "./index.html";
				}, 1500);
			}
		},
		methods: {
			getQueryParams(url) {
				const paramArr = url.slice(url.indexOf("?") + 1).split("&");
				const params = {};
				paramArr.map((param) => {
					const [key, val] = param.split("=");
					params[key] = decodeURIComponent(val);
				});
				return params;
			},
			handleAddrChange(e) {
				console.log(e);
				this.addr = e;
				this.addAddressForm.address.province = e[0];
				this.addAddressForm.address.city = e[1];
				this.addAddressForm.address.district = e[2];
			},
			add() {
				let data = {
					productId: "",
					image: "",
					storeName: "",
					cartNum: "",
					price: "",
					allPrice: "",
					productAttrUnique: "",
					attr: {
						cartAttr: false,
						productAttr: [],
						productSelect: {},
					},
				};
				this.tableData.push(data);
			},
			getGoods() {
				let query = this.getQueryParams(window.location.href)
				this.goodsid = query?.id


				$.ajax({
					url: apiurl + "/api/front/products",
					headers: {
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					data: {
						page: 1,
						limit: 1000
					},
					success: (res) => {
						if (res.code == 200) {
							this.options = res.data.list;

							if (this.goodsid) {
								this.addNowGoods()
							}
						}

						if (res.code == 401) {
							this.$message.error("请先登录");
							setTimeout(() => {
								window.location.href = "./index.html";
							}, 1500);
						}
					},
				});
			},
			addNowGoods() {
				console.log(this.options)
				if (this.options.length > 0) {
					this.options.forEach(item => {
						if (item.id == this.goodsid) {
							let indexs = {
								$index: this.tableData.length - 1
							}

							this.selectOption(indexs, item.id)
						}
					})
				}
			},
			selectOption(scope, e) {
				console.log(e)
				console.log(scope.$index)
				let index = scope.$index;
				$.ajax({
					url: apiurl + `/api/front/product/detail/${e}`,
					headers: {
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					data: {
						type: "normal"
					},
					success: (res) => {
						let data = {
							productId: e,
							image: res.data.productInfo.image,
							storeName: res.data.productInfo.storeName,
							cartNum: 1,
							price: "",
							allPrice: "",
							productAttrUnique: "",
							attr: {
								cartAttr: false,
								productAttr: [],
								productSelect: {},
							},
							productValue: [],
							productInfo: {},
						};

						data.attr.productAttr = res.data.productAttr;
						data.productValue = res.data.productValue;
						data.productInfo = res.data.productInfo;

						let productAttr = data.attr.productAttr.map((item) => {
							return {
								attrName: item.attrName,
								attrValues: item.attrValues.split(","),
								id: item.id,
								isDel: item.isDel,
								productId: item.productId,
								type: item.type,
							};
						});

						data.attr.productAttr = productAttr;

						//  设置默认选中
						let productAttr2 = data.attr.productAttr;

						let value = [];
						for (let key in data.productValue) {
							if (
								data.productValue[key] &&
								data.productValue[key].stock &&
								data.productValue[key].stock > 0
							) {
								value = data.attr.productAttr.length ? key.split(",") : [];
								break;
							}
						}
						for (let i = 0; i < productAttr2.length; i++) {
							productAttr2[i].index = value[i];
						}

						//sort();排序函数:数字-英文-汉字；
						let productSelect = data.productValue[value.join(",")];

						if (productSelect && productAttr2.length) {
							data.attr.productSelect.storeName = data.productInfo.storeName;
							data.attr.productSelect.image = productSelect.image;
							data.attr.productSelect.price = productSelect.price;
							data.attr.productSelect.stock = productSelect.stock;
							data.attr.productSelect.unique = productSelect.id;
							data.attr.productSelect.agentPrice = productSelect.agentPrice;
							data.attr.productSelect.cart_num = 1;
						} else if (!productSelect && productAttr2.length) {
							data.attr.productSelect.storeName = productInfo.storeName;
							data.attr.productSelect.image = productInfo.data.image;
							data.attr.productSelect.price = productInfo.data.price;
							data.attr.productSelect.stock = productInfo.data.stock;
							data.attr.productSelect.unique = productInfo.data.id;
							data.attr.productSelect.agentPrice = productSelect.agentPrice;
							data.attr.productSelect.cart_num = 1;
						} else if (!productSelect && !productAttr2.length) {
							data.attr.productSelect.storeName = productInfo.storeName;
							data.attr.productSelect.image = productInfo.data.image;
							data.attr.productSelect.price = productInfo.data.price;
							data.attr.productSelect.stock = productInfo.data.stock;
							data.attr.productSelect.agentPrice = productInfo.agentPrice;
							data.attr.productSelect.unique = productInfo.data.id || "";
							data.attr.productSelect.cart_num = 1;
						}
							


						if (data.attr.productSelect && data.attr.productSelect.price) {
							data.allPrice =
								data.attr.productSelect.cart_num *
								data.attr.productSelect.price;
						}


						if (data.attr.productSelect && data.attr.productSelect.agentPrice) {
							data.allPrice =
								data.attr.productSelect.cart_num *
								data.attr.productSelect.agentPrice;
						}

						this.$set(this.tableData, index, data);
						this.add();

						this.findAllPrice();

						this.$forceUpdate();
					},
				});
			},
			toEditAddress() {
				window.location.href = './address.html'
			},
			// 计算所有的金额和数量
			findAllPrice() {
				let num = 0;
				let price = 0;
				this.tableData.forEach((item) => {
					num += item.cartNum;
					price += item.allPrice;
				});
				this.allNumber = num;
				this.allPrice = price;
			},
			tapAttr(rowIndex, indexw, indexn) {
				let attr = this.tableData[rowIndex].attr;

				let productValue = this.tableData[rowIndex].productValue;

				attr.productAttr[indexw].index =
					attr.productAttr[indexw].attrValues[indexn];

				let value = this.getCheckedValue(attr).join(",");

				let productSelect = productValue[value];

				if (productSelect) {
					attr.productSelect.image = productSelect.image;
					attr.productSelect.price = productSelect.price;
					attr.productSelect.stock = productSelect.stock;
					attr.productSelect.unique = productSelect.id;
					attr.productSelect.agentPrice = productSelect.agentPrice;
					attr.productSelect.cart_num = 1;
				} else {
					attr.productSelect.image = productInfo.data.image;
					attr.productSelect.price = productInfo.data.price;
					attr.productSelect.stock = productInfo.data.stock;
					attr.productSelect.unique = productInfo.data.id;
					attr.productSelect.agentPrice = productInfo.agentPrice;
					attr.productSelect.cart_num = 1;
				}

				if (attr.productSelect && attr.productSelect.price) {
					this.tableData[rowIndex].allPrice =
						attr.productSelect.cart_num * attr.productSelect.price;
				}

				if (attr.productSelect && attr.productSelect.agentPrice) {
					this.tableData[rowIndex].allPrice =
						attr.productSelect.cart_num * attr.productSelect.agentPrice;
				}


				

				this.findAllPrice();
			},

			getCheckedValue(attr) {
				let productAttr = attr.productAttr;
				let value = [];
				for (let i = 0; i < productAttr.length; i++) {
					for (let j = 0; j < productAttr[i].attrValues.length; j++) {
						if (productAttr[i].index === productAttr[i].attrValues[j]) {
							value.push(productAttr[i].attrValues[j]);
						}
					}
				}
				return value;
			},
			delRow(index) {
				this.tableData.splice(index, 1);

				this.findAllPrice();
			},
			changeGoodsNumber(scope, num) {
				if (
					scope.row.attr.productSelect &&
					scope.row.attr.productSelect.price
				) {
					this.tableData[scope.$index].allPrice =
						num * scope.row.attr.productSelect.price;
				}

				if (
					scope.row.attr.productSelect &&
					scope.row.attr.productSelect.agentPrice
				) {
					this.tableData[scope.$index].allPrice =
						num * scope.row.attr.productSelect.agentPrice;
				}




				this.findAllPrice();
			},
			confim() {
				let arr = [];
				if (this.tableData.length > 0) {
					this.tableData.forEach((item) => {
						if (item.productId) {
							item.productAttrUnique = item.attr.productSelect.unique;
							arr.push(item);
						}
					});
				}

				$.ajax({
					url: apiurl + "/api/front/order/pre/webOrder",
					data: JSON.stringify(arr),
					type: "POST",
					headers: {
						"Content-Type": "application/json",
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.code == 200) {
							if (res.data.preOrderNo) {
								this.weixinurl = ''
								this.preOrderNo(res.data.preOrderNo);
							} else {
								this.$message.error("下单失败");
							}
						}

						if (res.code == 401) {
							this.$message.error("请先登录");
							setTimeout(() => {
								window.location.href = "./index.html";
							}, 1500);
						}


					},
				});
			},
			// 获取收货地址
			getAddress() {
				$.ajax({
					url: apiurl + `/api/front/address/default`,
					headers: {
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.code == 200) {
							this.addAddressForm.address = res.data;
							if (res.data && res.data.id) {
								this.SubOrderForm.addressId = res.data.id;
								this.SubOrderForm.phone = res.data.phone;
							}
						}


						if (res.code == 401) {
							this.$message.error("请先登录");
							setTimeout(() => {
								window.location.href = "./index.html";
							}, 1500);
						}
					},
				});
			},
			getyouhuiquanList() {
				$.ajax({
					url: apiurl + `/api/front/coupons/user`,
					headers: {
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.data) {
							this.youhuiquanlist = res.data
						}
					},
				})
			},

			getintegraluser() {
				$.ajax({
					url: apiurl + `/api/front/integral/user`,
					headers: {
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.data) {
							this.allintegral = res.data
						}
					},
				})
			},
			preOrderNo(preOrderNo) {
				$.ajax({
					url: apiurl + `/api/front/order/load/pre/${preOrderNo}`,
					headers: {
						"Content-Type": "application/json",
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.code == 200) {
							this.SubOrderForm.preOrderNo = preOrderNo;

							if (res.data.orderInfoVo.pointProduct == 1) {
								this.SubOrderForm.payType = "integral";
								this.SubOrderForm.useIntegral = true;
							} else {
								this.SubOrderForm.payType = "offline";
								this.SubOrderForm.useIntegral = false;
							}

							this.createOrder();
						}


						if (res.code == 401) {
							this.$message.error("请先登录");
							setTimeout(() => {
								window.location.href = "./index.html";
							}, 1500);
						}
					},
				});
			},
			mePayed() {

				$.ajax({
					url: apiurl + `/api/front/pay/queryPayResult?orderNo=${this.payorderno}`,
					headers: {
						"Content-Type": "application/json",
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.code == 200) {
							this.$message.success('支付成功')
							setTimeout(() => {
								this.toOrder()
							}, 1500)
						}

						if (res.code == 401) {
							this.$message.error("请先登录");
							setTimeout(() => {
								window.location.href = "./index.html";
							}, 1500);
						}
					},
				});
			},
			toOrder() {
				window.location.href = "/order.html";
			},
			createOrder() {
				$.ajax({
					url: apiurl + `/api/front/order/create`,
					data: JSON.stringify(this.SubOrderForm),
					type: "POST",
					headers: {
						"Content-Type": "application/json",
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {

						if (res.code == 200) {
							this.$message.success("订单创建成功");

							this.$confirm('是否立即支付?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								// this.$message({
								//   type: 'success',
								//   message: '删除成功!'
								// });
								this.payorderno = res.data.orderNo
								this.dialogVisible = true
								// this.payOrder(res)
							});
						} else {
							this.$message.error(res.message);
						}
					},
				});
			},
			payOrder() {
				let data = {
					payType: this.payradio,
					orderNo: this.payorderno,
					payChannel: 'pc'
				}

				$.ajax({
					url: apiurl + `/api/front/pay/payment`,
					data: JSON.stringify(data),
					type: "POST",
					headers: {
						"Content-Type": "application/json",
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.code == 200) {
							console.log(res)
							if (this.payradio == 'weixin') {
								// const url =  QRCode.toDataURL(res.data.jsConfig.codeUrl);
								// console.log(url)
								QRCode.toDataURL(res.data.jsConfig.codeUrl).then((url) => {
									this.weixinurl = url //显示二维码图片
								})

							} else {
								this.weixinurl = ''
								this.$message.success("订单支付成功");
							}

						}


						if (res.code == 401) {
							this.$message.error("请先登录");
							setTimeout(() => {
								window.location.href = "./index.html";
							}, 1500);
						}


					},
				});

			},
			edit(item) {
				this.addAddressForm.id = item.id;
				this.addAddressForm.detail = item.detail;
				this.addAddressForm.realName = item.realName;
				this.addAddressForm.phone = item.phone;
				this.addAddressForm.address.province = item.province;
				this.addAddressForm.address.city = item.city;
				this.addAddressForm.address.district = item.district;

				this.showAdd = true;
			},
			addAddress() {
				$.ajax({
					url: apiurl + `/api/front/address/edit`,
					data: JSON.stringify(this.addAddressForm),
					type: "POST",
					headers: {
						"Content-Type": "application/json",
						"Authori-zation": localStorage.getItem("token") ?
							localStorage.getItem("token") : "",
					},
					success: (res) => {
						if (res.code == 200) {
							this.$message.success("收货地址修改成功");
							this.getAddress();
						}

						if (res.code == 401) {
							this.$message.error("请先登录");
							setTimeout(() => {
								window.location.href = "./index.html";
							}, 1500);
						}
					},
				});
			},
		},
	});
</script>

<style>
	.el-radio {
		margin-bottom: 0 !important;
	}

	.productWinList .item .titles {
		font-size: 14px;
		text-align: center;
	}

	.productWinList .item {
		margin: 5px 0;
	}

	.productWinList .item .listn {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.productWinList .item .listn .itemn {
		border: 1px solid #f2f2f2;
		font-size: 13px;
		color: #282828;
		padding: 4px 16px;
		border-radius: 5px;
		margin-top: 10px;
		margin-right: 7px;
		background-color: #f2f2f2;
		cursor: pointer;
	}

	.wxpayline {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.productWinList .item .listn .on {
		color: #e93323;
		background: #fff4f3;
		border-color: #e93323;
	}

	.address_box .active {
		color: red;
	}

	button {
		outline: none;
	}

	.otherlist {
		margin-top: 10px;
	}

	.fixedBox {}

	.beizhu {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: end;
		position: fixed;
		bottom: 30px;
		background-color: #fff4f3;
		width: 1170px;
		z-index: 1000;
		border-radius: 10px;
		padding: 10px;
	}
</style>